<template>
  <div class="content forget-pwd">
    <div class="head-top bg-white">
      <dc-header :page-to="'/forgetPwd'" :title="'设置新密码'"></dc-header>
      <div class="pl50 pr50 pt68">
        <inputItem class="mt30" placeholder="请输入新密码，6-20位数字和字母组合" type="password"
                   iconName="icon-login-account"
                   v-model="password"
                   :maxLength = "20"
                   v-validate="{ rules: { required: true ,min: 6, max: 20} }"
                   name="新密码"
        />
      </div>
      <div class="pl50 pr50 mt50">
        <mt-button size="large" type="primary" @click="_goto"
                   :disabled="!password && errors.items.length==0 || errors.items.length!=0">进入龙决策
        </mt-button>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/components/header';
  import inputItem from '@/components/input/inputItem';
  import api from '../../common/api/login';
  import mintUi from '../../common/mintUi';
  export default {
    data () {
      return {
        username: this.$route.query.username,
        password: ''
      };
    },
    components: {
      'dc-header': header,
      'inputItem': inputItem
    },
    methods: {
      _goto () {
        let self = this;
        this.$validator.validateAll().then((result) => {
          if (result) {
            let data = {
              username: this.username,
              password: this.password
            };
            api.resetPassword(data)
              .then(res => {
                console.log(res);
                mintUi.openToast('密码修改成功');
                self.$router.push('/hello');
              });
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  @import "../../assets/css/variable";

  .forget-pwd {
    .pt68 {
      padding-top: px2rem(68px);
    }
    .mt60 {
      margin-top: px2rem(60px);
    }
  }
</style>
